<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE HTML>
<html>
<head>

    <base href="<%=basePath%>">

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <style type="text/css">
        .order_detail{
            background-color: durkgray;
            border: 1px solid black;
            border-right: 0;
            height: 40px;
            line-height: 40px;
        }
        .order_detail input{
            height: 30px;
            text-align: center;
        }
        .order_add{
            border: 1px solid black;
        }
        #order_detail{
            text-align: center;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" method="post" action="${empty customer ? 'customer/insert.do' : 'customer/update.do'}" id="orderForm">
        <!-- 隐藏域 ，订单状态-->
        <input type="hidden" name="orderStatus" value="1">

        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">业务员：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="userId">
                        <option value="0">请选择</option>
                        <c:forEach items="${users}" var="obj">

                            <option value="${obj.userId}">${obj.realname}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">客户：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="customerId" id="customer" required="required">
                        <option value="undefined">请选择</option>

                        <!--
                            html5开始支持html标签自定义属性（用于存储相关数据到标签上面）
                            语法
                                data-xxx
                                data- : 固定前缀
                                xxx ：根据当前场景建明之意
                                如 ：
                                data-base_id
                                data-username
                                data-user_id

                                注意：html属性不支持驼峰命名，不支持大写，全部小写

                            如何使用jquery对象获取自定义属性的值

                            var value = $.data("xxx");
                            如：
                            var baseId = $.data("base_id");
                            var username = $.data("username");
                            var userId = $.data("user_id");
                         -->

                        <c:forEach items="${customers}" var="obj">
                            <option  data-base_id="${obj.baseId}"  value="${obj.customerId}">${obj.customerName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">到达区域：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select id="section" name="sectionId">
                        <option value="undefined">请选择</option>
                        <c:forEach items="${sections}" var="obj">
                            <option  value="${obj.baseId}">${obj.baseName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>


        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value=""  placeholder="" id="shippingAddress" name="shippingAddress">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货人：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value=""   placeholder="" id="shippingName" name="shippingName">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货联系电话：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value=""   placeholder="" id="shippingPhone" name="shippingPhone">
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">付款方式：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="paymentMethodId">
                        <c:forEach items="${paymentMethod}" var="obj">
                            <option value="${obj.baseId}">${obj.baseName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">货运方式：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="freightMethodId">
                        <c:forEach items="${freightMethod}" var="obj">
                            <option value="${obj.baseId}">${obj.baseName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">取件方式：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="takeMethodId">
                        <c:forEach items="${takeMethod}" var="obj">
                            <option value="${obj.baseId}">${obj.baseName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">物流公司：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="大雄物流公司"  disabled="disabled"  placeholder="" id="customerName" name="customerName">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">快递单号：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="243242343"   placeholder="" id="customerName" name="customerName">
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收件人：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="仓管员A(隔壁老王)" disabled="disabled"   placeholder="" id="shippingName" name="shippingName">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="广州市天河区xxx" disabled="disabled"   placeholder="" id="shippingAddress" name="shippingAddress">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">联系电话：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="135xxxxx"  disabled="disabled"  placeholder="" id="customerName" name="customerName">
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">取件地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value=""   placeholder="" id="customerName" name="takeAddress">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">联系电话：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value=""   placeholder="" id="takePhone" name="takePhone">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">取件联系人：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value=""   placeholder="" id="takeName" name="takeName">
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">订单备注：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <textarea name="orderRemark" cols="" rows="" class="textarea"  placeholder="" ></textarea>
                </div>
            </div>
        </div>



        <div  id="order_detail" class="row cl">
            <h3>货品明细</h3>
            <div>
                <div  class="col-xs-2 col-sm-2 order_detail">货物名称</div>
                <div  class="col-xs-2 col-sm-1 order_detail">数量</div>
                <div  class="col-xs-2 col-sm-1 order_detail">单位</div>
                <div  class="col-xs-2 col-sm-2 order_detail">单价</div>
                <div  class="col-xs-2 col-sm-2 order_detail">总价值</div>
                <div  class="col-xs-2 col-sm-3 order_detail">备注</div>
                <div  class="col-xs-2 col-sm-1 order_detail order_add">
				<span style="font: 30px; cursor: pointer;color: green"
                      class="glyphicon glyphicon-plus"
                      onclick="add_goods_detail();"
                ></span>
                </div>
            </div>

            <div class="goods_detail" id="goods_detail">
                <div  class="col-xs-2 col-sm-2 order_detail">
                    <input type="text" name="orderDetails[][goodsName]">
                </div>
                <div  class="col-xs-2 col-sm-1 order_detail">
                    <input type="number" size="3" onkeyup="operationTotalPrice(this);"  name="orderDetails[][goodsNumber]">
                </div>
                <div  class="col-xs-2 col-sm-1 order_detail">
                    <select name="orderDetails[][goodsUnit]">
                        <c:forEach items="${units}" var="obj">
                            <option value="${obj.baseId}">${obj.baseName}</option>
                        </c:forEach>
                    </select>
                </div>
                <div  class="col-xs-2 col-sm-2 order_detail">
                    <input type="number"  onkeyup="operationTotalPrice(this);" name="orderDetails[][goodsUnitPrice]">

                </div>
                <div  class="col-xs-2 col-sm-2 order_detail">
                    <input type="text" readonly="readonly" name="orderDetails[][goodsTotal]">
                </div>
                <div  class="col-xs-2 col-sm-3 order_detail">
                    <input type="text" name="orderDetails[][goodsRemark]">
                </div>
                <div  class="col-xs-2 col-sm-1 order_detail order_add">
				<span id="removeSpan" style="font: 30px;cursor: pointer;color: red"
                      class="glyphicon glyphicon-remove"
                      onclick="remove_goods_detail(this);"
                ></span>
                </div>
            </div>



        </div>


        <div class="row cl">
            <div class="col-xs-12 col-sm-12 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<%--<script type="text/javascript" src="lib/jquery/jquery.serializejson.min.js"></script>--%>
<script type="text/javascript">


    /*计算总价(单价 * 数量)*/
    function operationTotalPrice(obj) {

        //获取外层div中的所有input
        var inputs =$(obj).parent().parent().find("input");

        //获取第二个和第三个的值,进行乘法运算,赋值给第四个
        var goodsNumber = inputs[1].value;
        var goodsPrice =inputs[2].value;

        if (goodsNumber !="" && goodsPrice !="") {
            //将第二第三值进行相乘运算
            inputs[3].value =goodsNumber * goodsPrice;
        }


    }


    /*删除货品表单*/
    function remove_goods_detail(obj) {

        //获取所有的class=goods_detail 的元素(类选择器是可以有多个元素)
        var goodsDetails = $(".goods_detail");

        if (goodsDetails.length == 1) {
            layer.tips('至少保留一个货品明细', $(obj));
            return false;
        }




        //删除当前按钮的父标签的父标签
        $(obj).parent().parent().remove();

    }


    /*货品明细*/
    function add_goods_detail(){
        //克隆货品明细表单
         var goodsDetail = $("#goods_detail").clone();

         //清除货品明细表单中的数据
        goodsDetail.find("input").val("");



         //追加到div中
        $("#order_detail").append(goodsDetail);
    }



    $(function () {
        //1.为客户下拉框绑定onChange事件
        $("#customer").change(function () {
            //获取客户下拉框的所有的选项中<option>被选中的data-base_id的值
            var baseId = $("#customer > option:selected").data("base_id");
            console.log(baseId)

            //2.以baseId值作为条件去区间管理的下拉框中去找option的value值等于BaseID的选项,让其选中
            var option=$("#section > option[value="+baseId+"]");
            //选中
            option.prop("selected",true);
        })


    })


</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>